<template>
    <div class="logo">
        <div class="logo-container">
<!--            <el-skeleton animated rows="1" :loading="loading">-->
<!--                <div >-->
<!--&lt;!&ndash;                <el-skeleton-item variant="circle" />&ndash;&gt;-->
<!--                <el-skeleton-item variant="text" style="width: 10px;" />-->
<!--                </div>-->
<!--&lt;!&ndash;                <el-avatar :size="40" :src="userAvatar" @error="errorHandler"/>&ndash;&gt;-->
<!--                <span>{{userName}}</span>-->
<!--            </el-skeleton>-->
          <span>学生综合素质评价系统</span>
        </div>
    </div>
</template>

<script setup>
import {ref, watch} from "vue";

const props = defineProps(["userName","userId"]);

const loading = ref(true);

watch(()=>props.userId,(newVal)=>{
    if(newVal >0){
        loading.value = false;
    }
})

const errorHandler = () => true



</script>

<style scoped lang="less">
@import "src/assets/css/common.less";

.el-avatar{
    margin-right: 10px;

}
span{
    font-size: 20px;
}

.logo{
    //position: relative;
    margin: 0;
    padding:0;
    height: @TopHeight;
    width: @NavMenuAsideWidth;
    background: @color;
    overflow: hidden;
    font-weight: bold;

    .logo-container{
        width: 100%;
        height: 100%;
        background: @EleColor;
        border-bottom-right-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
      .el-skeleton{
        width: 100%;
        height: 100%;
        padding: 10px;
        div {
          display: flex;
          justify-content: center;
          align-items: center;
        }
          :first-child{
            height: 40px;
            width: 40px;
            //background: #646cff;
            border-radius: 50%;
            margin-right: 15px;
            margin-left: 20px;
          }
        }
      }
    }
</style>
